<script setup>
import { ref } from "vue";

const banners = ref([
  {
    id: 1,
    title: "智慧农业的引领者",
    text: "提供先进的农业机械和智能解决方案",
    image: "banner-1",
  },
  {
    id: 2,
    title: "科技赋能现代农业",
    text: "高效、精准、环保的农业机械装备",
    image: "banner-2",
  },
  {
    id: 3,
    title: "助力农业现代化发展",
    text: "打造智能农机生态系统",
    image: "banner-3",
  },
]);
</script>

<template>
  <section class="banner-section">
    <el-carousel height="500px" indicator-position="outside" :interval="5000">
      <el-carousel-item v-for="banner in banners" :key="banner.id">
        <div :class="['banner-item', banner.image]">
          <div class="banner-content">
            <h2 class="banner-title">{{ banner.title }}</h2>
            <p class="banner-text">{{ banner.text }}</p>
            <el-button type="primary" size="large" class="banner-button"
              >了解更多</el-button
            >
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </section>
</template>

<style scoped>
.banner-section {
  margin-top: 0;
}

.banner-item {
  height: 500px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  position: relative;
}

.banner-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.banner-1 {
  background-image: url("https://images.unsplash.com/photo-1625246333195-78d9c38ad449?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80");
}

.banner-2 {
  background-image: url("https://images.unsplash.com/photo-1627920769842-6b75b3e85e0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80");
}

.banner-3 {
  background-image: url("https://images.unsplash.com/photo-1625243338629-a7b33d7947f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80");
}

.banner-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  color: var(--white);
  position: relative;
  z-index: 1;
  padding: 0 20px;
}

.banner-title {
  font-size: 48px;
  margin-bottom: 20px;
  font-weight: bold;
}

.banner-text {
  font-size: 20px;
  margin-bottom: 30px;
}

.banner-button {
  padding: 12px 30px;
  font-size: 16px;
}

@media (max-width: 992px) {
  .banner-title {
    font-size: 36px;
  }

  .banner-text {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .banner-title {
    font-size: 28px;
  }

  .banner-text {
    font-size: 16px;
  }

  .banner-button {
    padding: 10px 20px;
    font-size: 14px;
  }

  .el-carousel {
    height: 400px !important;
  }

  .banner-item {
    height: 400px;
  }
}

@media (max-width: 576px) {
  .banner-title {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .banner-text {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .el-carousel {
    height: 350px !important;
  }

  .banner-item {
    height: 350px;
  }
}
</style> 